<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./boring.css">
    <title>BORING</title>
</head>

<body>
    <main>
        <div id="xxx" class="wrapper">

        </div>
    </main>

    <script>
        var keys = {
            0: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
            1: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
            2: ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
            length: 3
        }
        var hash = {
            q: 'qunar.com',
            w: 'weibo.com',
            e: 'ele.me',
            r: undefined,
            t: 'tencent.com',
            o: 'opera.com',
        }
        var hashInLocalStorage = JSON.parse(localStorage.getItem('ccc' || 'null'))
        if (hashInLocalStorage) {
            hash = hashInLocalStorage
        }

        for (var index = 0; index < keys.length; index = index + 1) {
            var div = document.createElement('div')
            xxx.appendChild(div)
            var row = keys[index]
            //   console.log(row)
            for (var index2 = 0; index2 < row.length; index2 = index2 + 1) {
                var kbd = document.createElement('kbd')
                div.appendChild(kbd)
                var span = document.createElement('span')
                kbd.appendChild(span)
                span.textContent = row[index2]
                var img = document.createElement('img')
                kbd.appendChild(img)
                img.className = 'fav'
                if (hash[row[index2]]) {
                    img.src = 'https://' + hash[row[index2]] + '/favicon.ico'
                } else {
                    img.src = '//i.loli.net/2019/06/22/5d0e14e42257c38764.png'
                }
                var button = document.createElement('button')
                kbd.appendChild(button)
                button.textContent = '编辑'
                button.id = row[index2]
                button.onclick = function (nnn) {
                    var button2 = nnn.target
                    var img2 = button2.previousSibling     //就是button的后面一个元素
                    var key = button2['id']
                    var x = prompt('请输入一个要存储的网址')
                    hash[key] = x
                    localStorage.setItem('ccc', JSON.stringify(hash))
                    img2.src = 'https://' + x + '/favicon.ico'
                    img2.onerror = function (e) {
                        // console.log(e)
                        e.target.src = '//i.loli.net/2019/06/22/5d0e14e42257c38764.png'
                    }
                }
            }

        }


        document.onkeypress = function (xxx) {
            //console.log(xxx)
            var key = xxx.key
            website = hash[key]
            window.open('https://' + website, '_blank')
        }




    </script>
</body>

</html>